<!-- 横向布局 -->
<template>
  <el-container class="layout">
    <el-header>
      <div class="logo flx-center">
        <img class="logo-img" src="@/assets/images/logo.svg" alt="logo" />
        <span class="logo-text">{{ title }}</span>
      </div>
      <el-menu
        mode="horizontal"
        menu-trigger="hover"
        ellipsis
        popper-offset="0"
        unique-opened
        active-text-color="var(--el-color-primary)"
        :default-active="activeMenu"
        :show-timeout="200"
      >
        <!--<el-sub-menu v-for="(item, index) in menuData" :key="index" :index="item.path">
          <template #title>{{ item.meta.title }}</template>
          <template #default>
            <div class="menu-box">
              <el-menu-item-group v-for="menu in item.children" :key="menu.path">
                <template #title>
                  <div class="el-menu-item-group-title">{{ menu.meta.title }}</div>
                </template>
                <el-menu-item v-for="menuItem in menu.children" :key="menuItem.path" :index="menuItem.path">
                  {{ menuItem.meta.title }}
                </el-menu-item>
              </el-menu-item-group>
            </div>
          </template>
        </el-sub-menu>-->
        <el-sub-menu v-for="(item, index) in menuList" :key="index" :index="item.path">
          <template #title>{{ item.meta.title }}</template>
          <template #default>
            <div class="menu-box">
              <el-menu-item-group v-for="menu in item.children" :key="menu.path">
                <template #title>
                  <div class="el-menu-item-group-title">{{ menu.meta.title }}</div>
                </template>
                <el-menu-item
                  v-for="menuItem in menu.children"
                  :key="menuItem.path"
                  :index="menuItem.path"
                  @click="handleClickMenu(menuItem)"
                >
                  {{ menuItem.meta.title }}
                </el-menu-item>
              </el-menu-item-group>
            </div>
          </template>
        </el-sub-menu>
      </el-menu>
      <ToolBarRight />
    </el-header>
    <Main />
  </el-container>
</template>

<script setup lang="ts" name="layoutTransverse">
import { computed } from 'vue'
import { useAuthStore } from '@/stores/modules/auth'
import { useRoute, useRouter } from 'vue-router'
import Main from '@/layouts/components/Main/index.vue'
import ToolBarRight from '@/layouts/components/Header/ToolBarRight.vue'
// import SubMenu from '@/layouts/components/Menu/SubMenu.vue'

const title = import.meta.env.VITE_GLOB_APP_TITLE

const menuData: any = [
  {
    path: '/dashboard1',
    name: 'Dashboard1',
    meta: {
      icon: 'Monitor',
      title: '系统1',
      isLink: '',
      isHide: false,
      isFull: false,
      isAffix: true,
      isKeepAlive: true
    },
    children: [
      {
        path: '/dispatch',
        name: 'Dispatch',
        redirect: '/dispatch/planList',
        meta: {
          icon: 'List',
          title: '生产计划',
          isLink: '',
          isHide: false,
          isFull: false,
          isAffix: false,
          isKeepAlive: true
        },
        children: [
          {
            path: '/home/index',
            name: 'PlanList',
            component: '/dispatch/producePlan/index',
            meta: {
              icon: 'Promotion',
              title: '生产计划单',
              isLink: '',
              isHide: false,
              isFull: false,
              isAffix: false,
              isKeepAlive: true
            }
          },
          {
            path: '/dispatch/list',
            name: 'Dispatch',
            component: '/dispatch/dispatchList/index',
            meta: {
              icon: 'Promotion',
              title: '调度单',
              isLink: '',
              isHide: false,
              isFull: false,
              isAffix: false,
              isKeepAlive: true
            }
          },
          {
            path: '/dispatch/receiptOrder',
            name: 'ReceiptOrder',
            component: '/dispatch/receiptOrder/index',
            meta: {
              icon: 'Promotion',
              title: '发货单',
              isLink: '',
              isHide: false,
              isFull: false,
              isAffix: false,
              isKeepAlive: true
            }
          },
          {
            path: '/dispatch/auditPlan',
            name: 'AuditPlan',
            component: '/dispatch/auditPlan/index',
            meta: {
              icon: 'Promotion',
              title: '审核计划单',
              isLink: '',
              isHide: false,
              isFull: false,
              isAffix: false,
              isKeepAlive: true
            }
          },
          {
            path: '/dispatch/vehicleDispatch',
            name: 'VehicleDispatch',
            component: '/dispatch/vehicleDispatch/index',
            meta: {
              icon: 'Van',
              title: '生产单调度',
              isLink: '',
              isHide: false,
              isFull: false,
              isAffix: false,
              isKeepAlive: true
            }
          },
          {
            path: '/dispatch/vehicleMap',
            name: 'VehicleMap',
            component: '/dispatch/vehicleMap/index',
            meta: {
              icon: 'Van',
              title: '车辆地图',
              isLink: '',
              isHide: true,
              isFull: true,
              isAffix: false,
              isKeepAlive: true
            }
          },
          {
            path: '/dispatch/dispatchOrderReview',
            name: 'DispatchOrderReview',
            component: '/dispatch/dispatchOrderReview/index',
            meta: {
              icon: 'DocumentChecked',
              title: '退转料审核',
              isLink: '',
              isHide: false,
              isFull: false,
              isAffix: false,
              isKeepAlive: true
            }
          },
          {
            path: '/dispatch/returnsPage',
            name: 'ReturnsPage',
            component: '/dispatch/returnsPage/index',
            meta: {
              icon: 'DocumentChecked',
              title: '退转料',
              isLink: '',
              isHide: false,
              isFull: false,
              isAffix: false,
              isKeepAlive: true
            }
          }
        ]
      },
      {
        path: '/contract',
        name: 'Contract',
        redirect: '/contract/contractInfo',
        meta: {
          title: '合同管理',
          icon: 'Management',
          isLink: '',
          isHide: false,
          isFull: false,
          isAffix: false,
          isKeepAlive: true
        },
        children: [
          {
            path: '/contract/contractInfo',
            name: 'ContractInfo',
            component: '/contractManage/contractInfo/index',
            meta: {
              icon: 'Management',
              title: '销售合同',
              isLink: '',
              isHide: false,
              isFull: false,
              isAffix: false,
              isKeepAlive: true
            }
          },
          {
            path: '/contract/info',
            name: 'ProcureContract',
            component: '/contractManage/procureContract/index',
            meta: {
              icon: 'Management',
              title: '采购合同',
              isLink: '',
              isHide: false,
              isFull: false,
              isAffix: false,
              isKeepAlive: true
            }
          }
        ]
      },
      {
        path: '/ratio',
        name: 'Ratio',
        redirect: '/ratio/baseRatio',
        meta: {
          icon: 'DocumentChecked',
          title: '配比单管理',
          isLink: '',
          isHide: false,
          isFull: false,
          isAffix: false,
          isKeepAlive: true
        },
        children: [
          {
            path: '/ratio/baseRatio',
            name: 'BaseRatio',
            component: '/ratioManage/baseRatio/index',
            meta: {
              icon: 'DocumentChecked',
              title: '基础配比',
              isLink: '',
              isHide: false,
              isFull: false,
              isAffix: false,
              isKeepAlive: true
            }
          },
          {
            path: '/ratio/standardRatio',
            name: 'StandardRatio',
            component: '/ratioManage/standardRatio/index',
            meta: {
              icon: 'DocumentChecked',
              title: '标准配比',
              isLink: '',
              isHide: false,
              isFull: false,
              isAffix: false,
              isKeepAlive: true
            }
          },
          {
            path: '/ratio/customRatio',
            name: 'CustomRatio',
            component: '/ratioManage/customRatio/index',
            meta: {
              icon: 'DocumentChecked',
              title: '客户配比',
              isLink: '',
              isHide: false,
              isFull: false,
              isAffix: false,
              isKeepAlive: true
            }
          },
          {
            path: '/ratio/ratioNoticeZr',
            name: 'RatioNoticeZr',
            component: '/ratioManage/ratioNoticeZr/index',
            meta: {
              icon: 'DocumentChecked',
              title: '配比通知单(主任)',
              isLink: '',
              isHide: false,
              isFull: false,
              isAffix: false,
              isKeepAlive: true
            }
          },
          {
            path: '/ratio/ratioNoticeGyy',
            name: 'RatioNoticeGyy',
            component: '/ratioManage/ratioNoticeGyy/index',
            meta: {
              icon: 'DocumentChecked',
              title: '配比通知单(工艺员)',
              isLink: '',
              isHide: false,
              isFull: false,
              isAffix: false,
              isKeepAlive: true
            }
          },
          {
            path: '/ratio/remainingMaterialNotices',
            name: 'RemainingMaterialNotices',
            component: '/ratioManage/remainingMaterialNotices/index',
            meta: {
              icon: 'DocumentChecked',
              title: '余料通知单(主任)',
              isLink: '',
              isHide: false,
              isFull: false,
              isAffix: false,
              isKeepAlive: true
            }
          }
        ]
      }
    ]
  },
  {
    path: '/dashboard2',
    name: 'Dashboard2',
    component: '/dashboard/index2',
    meta: {
      icon: 'Monitor',
      title: '系统2',
      isLink: '',
      isHide: false,
      isFull: false,
      isAffix: true,
      isKeepAlive: true
    },
    children: [
      {
        path: '/auth',
        name: 'Auth',
        redirect: '/auth/role',
        meta: {
          icon: 'Setting',
          title: '权限管理',
          isLink: '',
          isHide: false,
          isFull: false,
          isAffix: false,
          isKeepAlive: true
        },
        children: [
          {
            path: '/auth/organizationManage',
            name: 'OrganizationManage',
            component: '/auth/organizationManage/index',
            meta: {
              icon: 'Setting',
              title: '组织管理',
              isLink: '',
              isHide: false,
              isFull: false,
              isAffix: false,
              isKeepAlive: true
            }
          },
          {
            path: '/auth/positionManage',
            name: 'Position',
            component: '/auth/positionManage/index',
            meta: {
              icon: 'Setting',
              title: '职位管理',
              isLink: '',
              isHide: false,
              isFull: false,
              isAffix: false,
              isKeepAlive: true
            }
          },
          {
            path: '/auth/roleManage',
            name: 'RoleManage',
            component: '/auth/roleManage/index',
            meta: {
              icon: 'Setting',
              title: '角色管理',
              isLink: '',
              isHide: false,
              isFull: false,
              isAffix: false,
              isKeepAlive: true
            }
          },
          {
            path: '/auth/userManage',
            name: 'User',
            component: '/auth/userManage/index',
            meta: {
              icon: 'Setting',
              title: '用户管理',
              isLink: '',
              isHide: false,
              isFull: false,
              isAffix: false,
              isKeepAlive: true
            }
          },
          {
            path: '/auth/menuManage',
            name: 'MenuManage',
            component: '/auth/menuManage/index',
            meta: {
              icon: 'Setting',
              title: '菜单管理',
              isLink: '',
              isHide: false,
              isFull: false,
              isAffix: false,
              isKeepAlive: true
            }
          }
        ]
      }
    ]
  }
]

const route = useRoute()
const router = useRouter()
const authStore = useAuthStore()
const menuList = computed(() => {
  return authStore.showMenuListGet
})
const activeMenu = computed(() => (route.meta.activeMenu ? route.meta.activeMenu : route.path) as string)

const handleClickMenu = (subItem: any) => {
  if (subItem.meta.isLink) return window.open(subItem.meta.isLink, '_blank')
  router.push(subItem.path)
}
</script>

<style lang="scss">
.el-menu-item-group__title {
  padding-left: 10px;
}
.el-menu--horizontal > .el-sub-menu.is-active .el-sub-menu__title {
  font-size: calc(var(--el-menu-item-font-size) + 1px);
  color: var(--el-menu-active-color) !important;
  border-bottom: 0 !important;
}
</style>
<style scoped lang="scss">
@import './index';
</style>
